<template>
  <div>


    <!--开启了路由模式，会以index作为路径进行跳转-->
    <el-menu
             unique-opened
             :default-active="$route.path"
             class="el-menu-vertical-demo"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse="isCollapse">
      <h3>{{isCollapse?'后台':'通用后台管理系统'}}</h3>
      <el-menu-item v-for="item in noChildrenMenu"
                    :key="item.name"
                    @click="handleMenuClick(item)"
                    :index="item.path">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      <el-submenu v-for="item in hasChildrenNenu"
                  :key="item.label"

                  :index="item.label">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{ item.label }}</span>
        </template>
        <el-menu-item-group v-for="subItem in item.children"
                            :key="subItem.name">
          <el-menu-item :index="subItem.path" @click="handleMenuClick(subItem)">{{ subItem.label }}</el-menu-item>
        </el-menu-item-group>

      </el-submenu>

    </el-menu>

  </div>
</template>

<script>
import Cookie from "js-cookie";
export default {
  name: "CommonAside",
  methods: {
    handleMenuClick(item){
      //当页面的路由与跳转的路由不一致才允许跳转
      //done :已完成解决面包屑重复导航的问题
      if (this.$route.path!==item.path&&!(this.$route.path ==='/home'&&(item.path==='/'))){
        this.$router.push(item.path)
      }
      this.$store.commit('selectMenu',item)
    }
  },
  computed: {
    //  没有子菜单
    noChildrenMenu() {
      return this.menuData.filter(item =>
          !item.children
      )
    },
    menuData(){
      //判断是否因为刷新而让menuData消失,如果缓存中没有，则从store中获取，否则，从缓存中获取
      return JSON.parse(Cookie.get('menuData'))||this.$store.state.info.menuData
    },
    //  有子菜单
    hasChildrenNenu() {
      return this.menuData.filter(item =>
          item.children
      )
    },
    //控制菜单的折叠与展开
    isCollapse(){
      return this.$store.state.tab.isCollapse
    },

  },



}
</script>

<style scoped lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu{
  height:100vh;
  border-right: 0;
  h3{
    margin: 10px auto;
    text-align: center;
    color: #fff;
  }
}
</style>
